<template>
    <div class="player">
       <div class="song-info">
           <span>{{singer.name}}</span>
           <span>{{singer.singerName}}</span>
       </div>
       <div class="song-pic">
           <img :src="singer.cover" alt="">
       </div>
       <div class="song-control">
           <audio :src="songUrl" controls autoplay></audio>
       </div>
    </div>
</template>
<script>
import axios from 'axios'
export default{
data(){
    return{
        songUrl:"",
        singer:{}
        }
},
created(){
    this.getData();
    this.getStoreSinger()
},
methods:{
    getData() {
      axios
        .get("/jsososo/song/urls", {
          params: {
            id: this.$route.params.id,
          },
        })
        .then((res) => {
          //console.loog(res.data)
          this.songUrl = res.data.data[this.$route.params.id];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getStoreSinger(){
        this.singer = this.$store.getters.singer
        // console.log(this.$store.state.singer)
    }
}
}
</script>
<style scoped>

</style>
